<?php
    $con = new mysqli("localhost", "root", "", "excel");
    mysqli_query($con,"set names 'utf8'"); //数据库输出编码
    //连接数据库
//    $conn=mysql_connect('localhost','root',''); //连接数据库
//    mysql_query("set names 'utf8'"); //数据库输出编码
//    mysql_select_db('excel',$conn); //打开数据库
    
    $query = $con->query("select * from test");
 
//     while($row=mysql_fetch_object($query))
//     {
//     echo "用户ID：".$row->id."<br>"; //通过对象运算符->获得改行数据在其属性上的值。
//     echo "用户名：".$row->prov."<br>";
//     echo "用户名：".$row->city."<br>";
//     echo "用户名：".$row->sales."<br>";
//     }
//     mysql_close(); //关闭MySQL连接
//     die();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>bofan百家城市</title>
        <meta charset="utf-8">

        <script src="js/echarts.min.js"></script>
        <script src="js/china.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <style type="text/css">
        table.altrowstable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #a9c6c9;
            border-collapse: collapse;
        }
        table.altrowstable th {
            border-width: 1px;
            padding: 12px;
            border-style: solid;
            border-color: #a9c6c9;
        }
        table.altrowstable td {
            border-width: 1px;
            padding: 8px;
            width: 100px !important;
            border-style: solid;
            border-color: #a9c6c9;
        }
        .oddrowcolor{
            background-color:#d4e3e5;
        }
        .evenrowcolor{
            background-color:#c3dde0;
        }
        div{
	       float:left;
        }
    </style>
    </head>
<body>

<div id="main" style="width:50%;height:100%;float: left"></div>
<div id="xiao" style="width:25%;height:100%;float: left"></div>
<!--<div id="shi" style="width:15%;height:100%;float: left"></div>-->
<input type="text" style="display: none" class="shen">
<!--<input type="text" style="display: none" class="shi">-->
<h2>总开发省份:<?php 
            $query = $con->query("SELECT COUNT(DISTINCT prov) FROM test");
            echo mysqli_fetch_array($query)[0];
        ?></h2>
        <h2>总开发城市:<?php 
            $query = $con->query("SELECT COUNT(city) FROM test");
            echo mysqli_fetch_array($query)[0];
        ?></h2>
<div id="view" style="height:100%;width:25%;">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>省份</th><th>城市</th><th>销量</th>
        </tr>
        <?php 
            $query = $con->query("select * from test order by sales DESC");
            while($row=mysqli_fetch_assoc($query)){
        ?> 
        <tr>
            <td><?php echo $row['prov']?></td><td><?php echo $row['city']?></td><td><?php echo $row['sales']?></td>
        </tr>
        <?php }?>
    </table>
</div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //给表格添加颜色
        function altRows(id){
            if(document.getElementsByTagName){

                var table = document.getElementById(id);
                var rows = table.getElementsByTagName("tr");

                for(i = 0; i < rows.length; i++){
                    if(i % 2 == 0){
                        rows[i].className = "evenrowcolor";
                    }else{
                        rows[i].className = "oddrowcolor";
                    }
                }
            }
        }

        window.onload=function(){
            altRows('alternatecolor');
        }

        //判断是否引入了某个指定js文件
        function isInclude(name){
            var js= /js$/i.test(name);
            var es=document.getElementsByTagName(js?'script':'link');
            for(var i=0;i<es.length;i++)
                if(es[i][js?'src':'href'].indexOf(encodeURI(name))!=-1)return true;
            return false;
        }

        function loadScript(url, type, name){
            var sql = "select city,sales from test where prov = '"+name+"'";
            $.post('../prov.php',{sql:sql},function(data){
                //计算点击省级json
                var guangdongData = JSON.parse(data);
                console.log(guangdongData);
                //如果已经引入了某个地图js，就直接显示地图，不重复引入
                var text = type == 'shen' ? '省级地图' : '市级地图';
                if(isInclude(name+".js")){
                    drawMap(name, type, guangdongData, text, '纯属虚构');console.log('eege');return;
                }
                var script = document.createElement ("script")
                script.type = "text/javascript";
                if (script.readyState){
                    script.onreadystatechange = function(){
                        if (script.readyState == "loaded" || script.readyState == "complete"){
                            script.onreadystatechange = null;
                            drawMap(name, type, guangdongData, '中国电商百家城市', text);
                        }
                    };
                } else {
                    script.onload = function(){
                        drawMap(name, type, guangdongData, '中国电商百家城市', text);
                    };
                }
                script.src = url;
                document.getElementsByTagName("head")[0].appendChild(script);
            })
        }

        function randomData() {
            return Math.round(Math.random()*500);
        }

        var mydata = [
            <?php
            $arr = array('北京','天津','上海','重庆','河北','河南','云南','辽宁','黑龙江','湖南','安徽','山东','新疆','江苏','浙江','江西','湖北','广西','甘肃','山西','内蒙古','陕西','吉林','福建','贵州','广东','青海','西藏','四川','宁夏','海南','台湾','香港','澳门');
            $query = $con->query("select prov,count(prov),sum(sales) from test group by prov");
            while($row=mysqli_fetch_assoc($query)){
                foreach ($arr as $value) {
                    if($value == $row['prov']){
                        echo '{name: "'.$row['prov'].'",value: '.$row['sum(sales)'].'},';
                    }else{
                        echo '{name: "'.$value.'",value: 0},';
                    }
                }
            }
            ?>
        ];

        function drawMap(darwMapType, type, data, text, subtext) {
            var option = {
//                backgroundColor: '#FFFFFF',
                title: {
                    text: text,
                    subtext: subtext,
                    x:'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                dataRange: {
                    min: 0,
                    max: 100000,
                    x: 'left',
                    y: 'bottom',
                    text:['高','低'],            // 文本，默认为数值文本
                    calculable : true,
                    color: ['#006edd', '#dffefe', '#ffffff']
                },
                toolbox: {
                    show : true,
                    orient : 'vertical',
                    x: 'right',
                    y: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series: [{
                    name: '总销量',
                    type: 'map',
                    mapType: darwMapType,
                    roam: true,
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data:data
                }]
            };
            if(darwMapType == 'china'){
                var id = 'main';
            }else if(type == 'shen'){
                var id = 'xiao';
            }else if(type == 'shi'){
                var id = 'shi';
            }

            echarts.dispose(document.getElementById(id));//先去掉原来的地图
            var chart = echarts.init(document.getElementById(id));
            chart.setOption(option);

            chart.on("click", function(param) {
                var shen = $(".shen").val();
                var shi = $(".shi").val();
                if(chart._dom.id == 'main'){//点击省级，显示对应省级地图
                    var url = "map/"+param.name+"/"+param.name+".js";
                    console.log(url);
                    loadScript(url, 'shen', param.name, '中国电商百家城市', '省级地图');
                    $(".shen").val(param.name);
                }
//                else if(chart._dom.id == 'xiao'){//点击市级，显示对应市级地图
//                    var url = "map/"+shen+"/city/"+param.name+".js";
//                    console.log(url);
//                    loadScript(url, 'shi', param.name, '全市地图', '纯属虚构');
//                    $(".shi").val(param.name);
//                }
//            drawMap(param.name, guangdongData);
            });
        }

        window.onload = function() {
            drawMap('china', 'china', mydata, '中国电商百家城市', '有个地主');
        }
</script>
</body>
</html>
